<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>checkbox 组件</title>
    <link href="../../../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <link href="../../../node_modules/font-awesome/css/font-awesome.css" rel="stylesheet">
    <script src="../../../tests/mod.js"></script>
</head>
<body>
    <div :controller="test">
        <xmp is="ms-form" :widget="{$form: @$form}">
            <ms-form-item :widget="{label:'兴趣'}">
                <ms-checkbox-group
                    :widget="{value:@value,col:'hobby',options:[
                                { label: '编程', value: 'code' },
                                { label: '其他', value: 'other' }
                            ],$rules:{required:true,type:'array',message:'请选择兴趣'}}">
                </ms-checkbox-group>
            </ms-form-item>
        </xmp>
        <pre>{{@json}}</pre>
    </div>
    <script>
        require(['../../../tests/index.js'], function () {
            var createForm = require('../../ms-form/create-form').createForm;
            require('../../ms-form');
            require('../');

            var vm = avalon.define({
                $id: 'test',
                value: ['code'],
                json: '',
                $form: createForm({
                    onFieldsChange: function (fields, record) {
                        vm.json = JSON.stringify(record);
                    }
                })
            });
        });
    </script>
</body>
</html>